<template>
  <div class="container">
    <h2>面试记录列表</h2>
    <div class="search-bar">
      <router-link to="/main/biao/mianshijl">
        <button class="btn btn-default">
          <i class="el-icon-back"></i>返回
        </button>
      </router-link>
      <div class="search-inputs">
        <input v-model="searchParams.name" placeholder="请输入姓名搜索" />
        <input v-model="searchParams.position" placeholder="请输入职位搜索" />
        <button @click="loadData" class="btn btn-search">
          <i class="el-icon-search"></i>搜索
        </button>
      </div>
      <router-link to="/main/biao/mianshijl" class="back-link">
       
        <button class="btn btn-primary">
          <i class="el-icon-plus"></i>新增记录
        </button>
      </router-link>
    </div>
    
    <div class="table-container">
      <table>
        <thead>
          <tr>
            <th>序号</th>
            <th>应聘职位</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>学历</th>
            <th>面试时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in tableData" :key="item.id">
            <td>{{ (currentPage - 1) * pageSize + index + 1 }}</td>
            <td>{{ item.position }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.age }}</td>
            <td>{{ item.gender }}</td>
            <td>{{ item.education }}</td>
            <td>{{ formatDateTime(item.interviewTime) }}</td>
            <td>
              <div class="operation-buttons">
                <button @click="viewDetail(item.id)" class="btn btn-info">
                  <i class="el-icon-view"></i>查看
                </button>
                <button @click="editRecord(item.id)" class="btn btn-warning">
                  <i class="el-icon-edit"></i>编辑
                </button>
                <button @click="deleteRecord(item.id)" class="btn btn-danger">
                  <i class="el-icon-delete"></i>删除
                </button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="pagination">
      <button :disabled="currentPage === 1" @click="prevPage" class="btn btn-default">
        <i class="el-icon-arrow-left"></i>上一页
      </button>
      <span>第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span>
      <button :disabled="currentPage >= totalPages" @click="nextPage" class="btn btn-default">
        下一页<i class="el-icon-arrow-right"></i>
      </button>
    </div>
  </div>
</template>

<script>
import interviewRecordApi from '@/api/interviewRecord';

export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      searchParams: {
        name: '',
        position: ''
      }
    };
  },
  computed: {
    totalPages() {
      return Math.ceil(this.total / this.pageSize);
    }
  },
  mounted() {
    this.loadData();
  },
  methods: {
    async loadData() {
      try {
        const response = await interviewRecordApi.getList({
          current: this.currentPage,
          size: this.pageSize,
          ...this.searchParams
        });
        this.tableData = response.data.records;
        this.total = response.data.total;
      } catch (error) {
        console.error('获取列表失败', error);
        this.$message.error('获取列表失败：' + (error.response?.data || error.message));
      }
    },
    formatDateTime(datetime) {
      if (!datetime) return '';
      const date = new Date(datetime);
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
    },
    viewDetail(id) {
      this.$router.push(`/main/biao/mianshijl?id=${id}&mode=view`);
    },
    editRecord(id) {
      this.$router.push(`/main/biao/mianshijl?id=${id}&mode=edit`);
    },
    async deleteRecord(id) {
      try {
        await this.$confirm('确定要删除这条记录吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        });
        
        const response = await interviewRecordApi.delete(id);
        if (response.data) {
          this.$message.success('删除成功');
          this.loadData();
        }
      } catch (error) {
        if (error !== 'cancel') {
          console.error('删除失败', error);
          this.$message.error('删除失败：' + (error.response?.data || error.message));
        }
      }
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
        this.loadData();
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
        this.loadData();
      }
    }
  }
};
</script>

<style scoped>
.container {
  padding: 32px;
  max-width: 1400px;
  margin: 0 auto;
  /* background: linear-gradient(135deg, #ffffff 0%, #f5f7fa 100%); */
  min-height: calc(100vh - 64px);
}

h2 {
  font-size: 1.2em;
  color: #2c3e50;
  margin: 0 0 32px;
  font-weight: 600;
  letter-spacing: 1px;
}

.search-bar {
  background: #ffffff;
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  border: 1px solid #ebeef5;
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.search-inputs {
  display: flex;
  gap: 16px;
  flex: 1;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.search-bar input {
  padding: 6px 8px;
  border: 1px solid #dcdfe6;
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.3s ease;
  color: #606266;
  background-color: #ffffff;
  min-width: 200px;
  flex: 1;
}

.search-bar input:hover {
  border-color: #c0c4cc;
}

.search-bar input:focus {
  border-color: #409EFF;
  outline: none;
  box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.1);
}

.table-container {
  background: #ffffff;
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  border: 1px solid #ebeef5;
  margin-bottom: 24px;
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0;
}

th, td {
  border: 1px solid #ebeef5;
  padding: 16px;
  text-align: center;
  transition: all 0.3s ease;
}

th {
  background: #f5f7fa;
  color: #2c3e50;
  font-weight: 600;
  white-space: nowrap;
}

td {
  color: #606266;
  background: #ffffff;
}

tr:hover td {
  background-color: #f5f7fa;
}

.btn {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 100px;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.btn-primary {
  background: #409EFF;
  color: white;
}

.btn-info {
  background: #67C23A;
  color: white;
}

.btn-warning {
  background: #E6A23C;
  color: white;
}

.btn-danger {
  background: #F56C6C;
  color: white;
}

.btn-search {
  background: #409EFF;
  color: white;
}

.btn-default {
  background: #909399;
  color: white;
}

.btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.pagination {
  background: #ffffff;
  padding: 20px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  border: 1px solid #ebeef5;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

.pagination span {
  color: #606266;
  font-size: 14px;
}

.operation-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.operation-buttons .btn {
  padding: 8px 16px;
  min-width: 80px;
}

@media screen and (max-width: 1200px) {
  .container {
    padding: 24px;
  }
  
  .search-bar {
    padding: 20px;
  }
  
  .table-container {
    padding: 20px;
  }
}

@media screen and (max-width: 768px) {
  .container {
    padding: 16px;
  }
  
  h2 {
    font-size: 24px;
    margin-bottom: 24px;
  }
  
  .search-bar {
    padding: 16px;
    flex-direction: column;
  }
  
  .search-inputs {
    width: 100%;
    flex-direction: column;
  }
  
  .search-bar input {
    width: 100%;
  }
  
  .btn {
    width: 100%;
  }
  
  th, td {
    padding: 12px 8px;
    font-size: 13px;
  }
  
  .operation-buttons {
    flex-direction: column;
  }
  
  .pagination {
    flex-direction: column;
    gap: 12px;
    padding: 16px;
  }
}
</style> 